<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.88.1">
  <!-- 解决ajax被spring security的CSRF拦截POST和PUT请求问题 -->
  <meta name="_csrf" th:content="${_csrf.token}">
  <meta name="_csrf_header" th:content="${_csrf.headerName}">
  <title>个人核酸检测信息</title>

  <!-- Bootstrap core CSS -->
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link th:href="@{/css/dashboard.css}" rel="stylesheet">
  <link th:href="@{/css/toastr.min.css}" rel="stylesheet">
  <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link th:href="@{/css/base.css}" rel="stylesheet">
  <link th:href="@{/css/tempusdominus-bootstrap-4.css}" rel="stylesheet">

  <style>
    @media (min-width: 768px) {
      #un {
        color: var(--light);
        font-size: 1.1rem;
      }
    }

  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
          integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
          crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script th:src="@{/js/jquery.slim.min.js}"><\/script>')</script>
  <script th:src="@{/js/bootstrap.min.js}"></script>
  <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/moment-with-locales.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/moment-timezone-with-data-2012-2022.min.js}"></script>
  <script th:src="@{/js/base.js}"></script>
  <script th:src="@{/js/tempusdominus-bootstrap-4.js}"></script>

  <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
  <script th:src="@{/js/toastr.min.js}"></script>
  <script th:src="@{/js/user-info.js}"></script>
  <script th:src="@{/js/dashboard.js}"></script>

  <script type="text/javascript">
    window.onload = function () {
      app()
    }
  </script>

</head>
<body>
<div th:replace="~{common :: top-nav}"></div>

<div class="container-fluid">
  <div class="row">
    <!--左侧导航-->
    <div class="col-2">
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link" id="v-pills-home-tab" role="tab" aria-selected="false" th:href="@{/login/main}" sec:authorize="hasAnyRole('STUDENT','GUARD','MG','TESTER')">个人信息</a>
        <a class="nav-link" id="v-pills-profile-tab" role="tab" aria-selected="false" th:href="@{/access/info(id=${session.user.id})}" sec:authorize="hasRole('STUDENT')">出入记录</a>
        <a class="nav-link active" id="v-pills-result-tab" role="tab" aria-selected="false" th:href="@{/detected/findResultByNo(id=${session.user.id})}" sec:authorize="hasRole('STUDENT')">核酸检测结果信息</a>
        <a class="nav-link" id="v-pills-sign-ed" role="tab" aria-selected="false" th:href="@{/stu/sign-formation}" sec:authorize="hasRole('STUDENT')">签到信息</a>
      </div>
    </div>

    <!-- 个人核酸检测信息 -->
    <div class="col-10 px-3 py-md-3">
      <div th:if="${nucleicAcidDetects == null}">
        <img th:src="@{/img/zwnr.png}" class="img-fluid rounded mx-auto d-block">
      </div>
      <div class="tab-pane fade show active" id="v-pills-settings" role="tabpanel" th:if="${nucleicAcidDetects != null}" sec:authorize="hasAnyRole('STUDENT')">
        <label class="h4">个人核酸检测信息</label>
        <!-- 时间查询 -->
        <div class="container">
          <div class="row justify-content-center">
            <div class='col-md-5'>
              <div class="row form-group">
                <label for="datetimepicker7" class="col-form-label col-form-label-sm">开始时间:</label>
                <div class="col-md-10 input-group date" id="datetimepicker7" data-target-input="nearest">
                  <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7" id="start-time"/>
                  <div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class='col-md-5'>
              <div class="row form-group">
                <label for="datetimepicker8" class="col-form-label col-form-label-sm">结束时间:</label>
                <div class="col-md-10 input-group date" id="datetimepicker8" data-target-input="nearest">
                  <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker8" id="end-time"/>
                  <div class="input-group-append" data-target="#datetimepicker8" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-">
              <button type="button" onclick="getTime('','',1,20)" class="btn btn-primary mb-2">查询</button>
            </div>
          </div>
        </div>
        <script type="text/javascript">
          $(function () {
            $('#datetimepicker7').datetimepicker();
            $('#datetimepicker8').datetimepicker({
              useCurrent: false
            });
            $("#datetimepicker7").on("change.datetimepicker", function (e) {
              $('#datetimepicker8').datetimepicker('minDate', e.date);
            });
            $("#datetimepicker8").on("change.datetimepicker", function (e) {
              $('#datetimepicker7').datetimepicker('maxDate', e.date);
            });
          });
        </script>

        <table class="table table-striped table-hover table-bordered">
          <thead class="thead-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">学号</th>
            <th scope="col">姓名</th>
            <th scope="col">检测结果</th>
            <th scope="col">检测时间</th>
            <th scope="col">检测地址</th>
          </tr>
          </thead>
          <tbody id="table_result">
          <tr th:each="na,stat : ${nucleicAcidDetects}" th:class="${stat.odd}?'odd':'even'">
            <th scope="row" th:text="${stat.count}"></th>
            <td th:text="${na.healthCode.student.no}"></td>
            <td th:text="${na.healthCode.student.username}"></td>
            <td th:text="阴性" th:if="${na.result}"></td>
            <td th:text="阳性" th:if="${!na.result}"></td>
            <td th:text="${#dates.format(na.time,'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${na.address}"></td>
          </tr>
          </tbody>
        </table>
        <div id="barcon" name="barcon"></div>
      </div>
    </div>
    <input type="hidden" id="waring-msg" th:value="${waring}">
  </div>
</div>

</body>
<script type="text/javascript">
  var token = $("meta[name='_csrf']").attr("content");
  var header = $("meta[name='_csrf_header']").attr("content");
  $(document).ajaxSend(function (e, xhr, options) {
    xhr.setRequestHeader(header, token);
  })

  //获取参数 提示是否成功
  function msg() {
    toastr.options.positionClass = 'toast-top-center';
    var warMsg = $('#waring-msg').val();
    if (!isEmpty(warMsg)) {
      toastr.warning('' + warMsg, '提示')
    }
    return false
  }

  //调用方法
  function app() {
    msg()
    goPage(1, 20)
    findSign()
  }

  //分页
  function goPage(pno, psize) {
    var itable = document.getElementById("table_result");//通过ID找到表格
    var num = itable.rows.length;//表格所有行数(所有记录数)
    var totalPage = 0;//总页数
    var pageSize = psize;//每页显示行数
    //总共分几页
    if (num / pageSize > parseInt(num / pageSize)) {
      totalPage = parseInt(num / pageSize) + 1;
    } else {
      totalPage = parseInt(num / pageSize);
    }
    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  1
    var endRow = currentPage * pageSize;//结束显示的行   10
    endRow = (endRow > num) ? num : endRow;
    //遍历显示数据实现分页
    for (var i = 1; i < (num + 1); i++) {
      var irow = itable.rows[i - 1];
      if (i >= startRow && i <= endRow) {
        irow.style.display = "table-row";
      } else {
        irow.style.display = "none";
      }
    }
    var tempStr = "";
    tempStr += "<div class='row justify-content-center py-md-3'>" +
            "<nav aria-label=\"AccessInfo For Student\">" +
            "<ul class=\"pagination\">"
    if (currentPage > 1) {
      tempStr += "<li class=\"page-item\">" +
              "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;</a>" +
              "</li>";

      var jhs = 1;
      for (var j = 1; j <= totalPage; j++) {
        tempStr += "<li class=\"page-item\">" +
                "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a>" +
                "</li>";
        jhs++;
        if (jhs > 6) {
          tempStr += "<li class=\"page-item disabled\">" +
                  "<a class=\"page-link\" >...</a>" +
                  "</li>";
          break;
        }
      }
    } else {
      tempStr += "<li class=\"page-item disabled\">" +
              "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;</a>" +
              "</li>"
      var jhs = 1;
      for (var j = 1; j <= totalPage; j++) {
        tempStr += "<li class=\"page-item\">" +
                "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a>" +
                "</li>";
        jhs++;
        if (jhs > 6) {
          tempStr += "<li class=\"page-item disabled\">" +
                  "<a class=\"page-link\" >...</a>" +
                  "</li>";
          break;
        }
      }
    }
    if (currentPage < totalPage) {
      tempStr += "<li class=\"page-item\">" +
              "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;</a>" +
              "</li>";
      for (var j = 1; j <= totalPage; j++) {
      }
    } else {
      tempStr += "<li class=\"page-item disabled\">" +
              "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;</a>" +
              "</li>";
      for (var j = 1; j <= totalPage; j++) {
      }
    }
    tempStr += "</ul>" +
            "</nav>" +
            "</div>"
    tempStr += "<div class='row justify-content-center'>当前第 " + pno + " 页 总计 " + totalPage + " 页 共 " + num + " 条记录</div>"
    document.getElementById("barcon").innerHTML = tempStr;
  }

  //根据时间进行筛选
  function getTime(stime, etime, pno, psize) {
    var itable = document.getElementById("table_result");//通过ID找到表格
    var num = itable.rows.length;//表格所有行数(所有记录数)
    var totalPage = 0;//总页数
    var pageSize = psize;//每页显示行数
    //获取时间
    var startTime = document.getElementById('start-time').value;
    var endTime = document.getElementById('end-time').value;
    if (stime === '' && etime === '') {//第一次筛选时将会进入此语句
      console.log(stime)
      if (startTime === '') {
        toastr.error('请选择开始时间！');
        return false;
      }
      if (endTime === '') {
        toastr.error('请选择结束时间！');
        return false;
      }
      stime = startTime;
      etime = endTime;
    }
    //将字符串转为时间
    var timeStart = new Date(stime);
    var timeEnd = new Date(etime);
    //将时间转为字符串，并指定格式  字符串再转为整型
    var timeStartInt = parseInt(timeStart.Format('yyyyMMddhhmm'))
    var timeEndInt = parseInt(timeEnd.Format('yyyyMMddhhmm'))

    var tableNum = 0; // 总行数
    for (var i = 1; i < (num + 1); i++) {
      var irow1 = itable.rows[i - 1];
      var cellTime1 = irow1.cells[4].innerHTML;
      var newCellTime1 = new Date(cellTime1).Format('yyyyMMddhhmm');
      if (timeEndInt > parseInt(newCellTime1) && parseInt(newCellTime1) > timeStartInt) {
        tableNum++;
      }
    }
    if (tableNum === 0) {
      for (var i = 1; i < (num + 1); i++) {
        itable.rows[i - 1].style.display = 'none';
      }
      document.getElementById("barcon").innerHTML = '';
      toastr.warning('这个时间段内没有任何核酸检测信息!');
      return false;
    }
    //总共分几页
    if (tableNum / pageSize > parseInt(tableNum / pageSize)) {
      totalPage = parseInt(tableNum / pageSize) + 1;
    } else {
      totalPage = parseInt(tableNum / pageSize);
    }
    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  1
    var endRow = currentPage * pageSize;//结束显示的行   15
    endRow = (endRow > num) ? num : endRow;

    //进行分页
    for (var i = 1; i < (num + 1); i++) {
      var irow = itable.rows[i - 1];
      var cellTime = irow.cells[4].innerHTML;
      var newCellTime = new Date(cellTime).Format('yyyyMMddhhmm');
      if (timeEndInt > parseInt(newCellTime) && parseInt(newCellTime) > timeStartInt) {
        console.log('s')
        if (i >= startRow && i <= endRow) {
          irow.style.display = 'table-row';
        } else {
          irow.style.display = 'none';
        }
      } else {
        irow.style.display = 'none';
      }
    }
    var tempStr = "";
    tempStr += "<div class='row justify-content-center py-md-3'>" +
            "<nav aria-label=\"AccessInfo For Student\">" +
            "<ul class=\"pagination\">"
    if (currentPage > 1) {
      tempStr += "<li class=\"page-item\">" +
              "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;</a>" +
              "</li>";

      var jhs = 1;
      for (var j = 1; j <= totalPage; j++) {
        tempStr += "<li class=\"page-item\">" +
                "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + j + "," + psize + ")\">" + j + "</a>" +
                "</li>";
        jhs++;
        if (jhs > 6) {
          tempStr += "<li class=\"page-item disabled\">" +
                  "<a class=\"page-link\" >...</a>" +
                  "</li>";
          break;
        }
      }
    } else {
      tempStr += "<li class=\"page-item disabled\">" +
              "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;</a>" +
              "</li>"
      var jhs = 1;
      for (var j = 1; j <= totalPage; j++) {
        tempStr += "<li class=\"page-item\">" +
                "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + j + "," + psize + ")\">" + j + "</a>" +
                "</li>";
        jhs++;
        if (jhs > 6) {
          tempStr += "<li class=\"page-item disabled\">" +
                  "<a class=\"page-link\" >...</a>" +
                  "</li>";
          break;
        }
      }
    }
    if (currentPage < totalPage) {
      tempStr += "<li class=\"page-item\">" +
              "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;</a>" +
              "</li>";
      for (var j = 1; j <= totalPage; j++) {
      }
    } else {
      tempStr += "<li class=\"page-item disabled\">" +
              "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;</a>" +
              "</li>";
      for (var j = 1; j <= totalPage; j++) {
      }
    }
    tempStr += "</ul>" +
            "</nav>" +
            "</div>"
    tempStr += "<div class='row justify-content-center'>当前第 " + pno + " 页 总计 " + totalPage + " 页 共 " + tableNum + " 条记录</div>"
    document.getElementById("barcon").innerHTML = tempStr;
  }

  //自定义转化函数
  Date.prototype.Format = function (fmt) {
    let o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (let k in o)
      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
  }

</script>
</html>